<template>
  <div id="app" ref="web">
    <!-- 头部 -->
    <div class="tops">
      <div class="displays displayJUscen" style="width: 100%; height: 100%">
        <div class="appLeft">
          <i
            class="el-icon-s-fold"
            style="margin-right: 10px; cursor: pointer"
            v-if="isCollapse == false"
            @click="isCollapse = !isCollapse"
          ></i>
          <i
            class="el-icon-s-unfold"
            style="margin-right: 10px; cursor: pointer"
            v-if="isCollapse == true"
            @click="isCollapse = !isCollapse"
          ></i>
          <span style="font-size: 22px">管理后台</span>
        </div>

        <div class="displays appRight">
          <!-- <div
            class="el-icon-full-screen"
            style="margin-right: 20px; font-size: 28px; cursor: pointer"
            @click="dapings"
          ></div> -->
          <!--          <el-avatar-->
          <!--            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"-->
          <!--          ></el-avatar>-->
          <div class="name">{{ title }}</div>
          <el-dropdown @command="handleCommand">
            <div class="caozuoBox">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided command="setPassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item divided command="loginOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- 左侧 -->
    <div class="sidebar" :class="isCollapse ? 'rightsTrue' : 'rights'">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleopen"
        @close="handleClose"
        @select="handleselect"
        background-color="#32394A"
        text-color="#bfcbd9"
        active-text-color="#F37B47"
        unique-opened
        router
        :collapse="isCollapse"
        style="height: 100%"
      >
        <el-menu-item
          index="/FirstPage"
          v-if="seller_user_type == null && urlName == 'FirstPage'"
        >
          <i class="el-icon-s-home" style="color: #f37b47"></i>
          <span slot="title">{{ "平台首页" }}</span>
        </el-menu-item>
        <template v-for="(item, index) in routerLimit">
          <!-- 无二级导航 -->
          <!-- <el-menu-item index="/item.path" :key="index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item> -->
          <!-- 有二级导航 -->
          
          <el-submenu
            :key="index"
            :index="item.name"
            v-if="!item.hide && item.children"
            :class="item.chideClass"
          >
            <template slot="title">
              <i :class="item.icon" style="color: #f37b47"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <template
                slot="title"
                v-for="(i, r) in item.children"
                v-if="!i.children"
              >
                <!-- 无三级导航 -->
                <el-menu-item :index="i.path" :key="r" v-if="!i.hide"
                  >{{ i.name }}
                </el-menu-item>
              </template>
              <!-- 有三级导航 -->
              <el-submenu
                v-for="(item1, index1) in item.children"
                :key="index1"
                :index="item1.path"
                v-if="item1.children"
              >
                <template slot="title">
                  <template>
                    <span slot="title">{{ item1.name }}</span>
                  </template>
                </template>
                <el-menu-item
                  v-for="(item2, index2) in item1.children"
                  :key="index2"
                  :index="item2.path"
                  v-if="!item2.hide"
                  >{{ item2.name }}
                </el-menu-item>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <!-- 右侧 -->
    <div class="" :class="isCollapse ? 'leftsTrue' : 'lefts'">
      <!-- 头部tag -->
      <div class="tags" v-if="showTags">
        <ul>
          <li
            class="tags-li"
            v-for="(item, index) in tagsList"
            :class="{ active: isActive(item.path) }"
            :key="index"
          >
            <router-link :to="item.path" class="tags-li-title">
              {{ item.title }}
            </router-link>
            <span class="tags-li-icon" @click="closeTags(index)"
              ><i class="el-icon-close"></i
            ></span>
          </li>
        </ul>
        <div class="tags-close-box">
          <el-dropdown @command="handleTags">
            <div class="tagBox">
              标签选项<i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu size="small" slot="dropdown">
              <el-dropdown-item command="other">关闭其他</el-dropdown-item>
              <el-dropdown-item command="all">关闭所有</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 右侧 -->
      <transition name="fade" mode="out-in">
        <router-view class="royConetng"></router-view>
      </transition>
    </div>

    <div class="kefu" v-if="userId">
      <!--      <el-badge :value="3" class="item">-->
      <floatBtn ref="floatBtn" v-show="showFlag"></floatBtn>
      <!--      </el-badge>-->
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input
            type="password"
            v-model="ruleForm.oldPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import { outLogin, outSellerLogin } from "../utils/api";
// import screenfull from "screenfull";
// import floatBtn from "./common/floatBtn";
import floatBtn from "../components/common/floatBtn.vue";
import { serPassword, getKefu } from "../utils/api";
import { editBusinessPassWord } from "../utils/main";
import xitongshezhi from "./pages/Settings/xitongshezhi";
import Administrator from "./pages/Settings/Administrator";
import roleList from "./pages/Settings/roleList";
// import bus from "../utils/bus"
import { mapState, mapMutations } from "vuex";
const bus = new Vue();

export default {
  name: "app",
  components: {
    floatBtn,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      const regIdCard = /^[0-9A-Za-z]{6,20}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        if (regIdCard.test(value)) {
          callback();
        } else {
          callback(new Error("只能输入6-20位的数字或字母"));
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userId: sessionStorage.getItem("seller_user_id"),
      title: sessionStorage.getItem("user_name"),
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        oldPass: [
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      isCollapse: false,
      isFullscreen: false,
      tagsList: [],
      routerList: [],
      dialogVisible: false,
      socket: null,
      timeout: 10000, // 45秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      lockReconnect: false, // 防止
      websocket: null,
      showFlag: false,
      token: sessionStorage.getItem("token"),
      seller_user_type: sessionStorage.getItem("seller_user_type"),
      urlName: sessionStorage.getItem("urlName"),
      seller_id: sessionStorage.getItem("seller_id"),
      routerLimit: JSON.parse(sessionStorage.getItem("routerLimit")),
      floatBtnFlag: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sessionStorage.getItem("user_name");
          let token = sessionStorage.getItem("token");
          let name = sessionStorage.getItem("user_name");
          if (sessionStorage.getItem("seller_id") == null) {
            serPassword(
              token,
              name,
              this.ruleForm.oldPass,
              this.ruleForm.checkPass
            ).then((res) => {
              if (res.data.status == true) {
                this.dialogVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                if (sessionStorage.getItem("seller_id") == null) {
                  outLogin(sessionStorage.getItem("token")).then((res) => {
                    if (res.data.status == true) {
                      if (sessionStorage.getItem("seller_id") == null) {
                        sessionStorage.clear();
                        this.$router.push("/Login");
                      } else {
                        sessionStorage.clear();
                        this.$router.push("/materilsLogin");
                      }
                    }
                  });
                } else {
                  outSellerLogin(sessionStorage.getItem("token")).then(
                    (res) => {
                      if (res.data.status == true) {
                        if (sessionStorage.getItem("seller_id") == null) {
                          sessionStorage.clear();
                          this.$router.push("/Login");
                        } else {
                          sessionStorage.clear();
                          this.$router.push("/materilsLogin");
                        }
                      }
                    }
                  );
                }
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            editBusinessPassWord(
              token,
              name,
              this.ruleForm.oldPass,
              this.ruleForm.checkPass
            ).then((res) => {
              if (res.data.status == true) {
                this.dialogVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                if (sessionStorage.getItem("seller_id") == null) {
                  outLogin(sessionStorage.getItem("token")).then((res) => {
                    if (res.data.status == true) {
                      if (sessionStorage.getItem("seller_id") == null) {
                        sessionStorage.clear();
                        this.$router.push("/Login");
                      } else {
                        sessionStorage.clear();
                        this.$router.push("/materilsLogin");
                      }
                    }
                  });
                } else {
                  outSellerLogin(sessionStorage.getItem("token")).then(
                    (res) => {
                      if (res.data.status == true) {
                        if (sessionStorage.getItem("seller_id") == null) {
                          sessionStorage.clear();
                          this.$router.push("/Login");
                        } else {
                          sessionStorage.clear();
                          this.$router.push("/materilsLogin");
                        }
                      }
                    }
                  );
                }
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    closeDialog(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    editPassWord() {},
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      console.log(command);
      if (command == "setPassword") {
        // 修改密码
        this.dialogVisible = true;
      } else if (command == "loginOut") {
        // 退出登录
        // sessionStorage.removeItem('zh');
        if (sessionStorage.getItem("seller_id") == null) {
          outLogin(sessionStorage.getItem("token")).then((res) => {
            if (res.data.status == true) {
              sessionStorage.clear();
              this.$router.push("/Login");
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                sessionStorage.clear();
                this.$router.push("/Login");
              }
              if (res.data.msg == "此账号没有权限") {
                sessionStorage.clear();
                this.$message.error(res.data.msg);
                this.loading = false;
              }
            }
          });
        } else {
          outSellerLogin(
            sessionStorage.getItem("token"),
            sessionStorage.getItem("seller_user_id")
          ).then((res) => {
            if (res.data.status == true) {
              // if (sessionStorage.getItem("seller_user_type") == 2) {
              //   this.websocket.close();
              // }
              sessionStorage.clear();
              this.$router.push("/materilsLogin");
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                sessionStorage.clear();
                this.$router.push("/materilsLogin");
              }
              if (res.data.msg == "此账号没有权限") {
                sessionStorage.clear();
                this.$message.error(res.data.msg);
                this.loading = false;
              }
            }
          });
        }
      }
    },
    // 点击大屏
    dapings() {
      if (!screenfull.enabled) {
        this.$message({
          message: "Your browser does not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    //导航
    handleopen(key, keyPath) {
      if (key == "平台首页") {
        this.$router.push("/FirstPage");
      }
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {},
    handleselect: function (a, b) {
      console.log(a, b);
    },
    isActive(path) {
      return path === this.$route.fullPath;
    },
    // 关闭单个标签
    closeTags(index) {
      if (this.tagsList.length == 1 && this.tagsList[0].path == "/FirstPage") {
        return;
      } else {
        const delItem = this.tagsList.splice(index, 1)[0];
        const item = this.tagsList[index]
          ? this.tagsList[index]
          : this.tagsList[index - 1];
        if (item) {
          delItem.path === this.$route.fullPath && this.$router.push(item.path);
        } else {
          this.$router.push("/FirstPage");
        }
      }
    },
    // 关闭全部标签
    closeAll() {
      if (this.tagsList.length == 1 && this.tagsList[0].path == "/FirstPage") {
      } else {
        this.tagsList = [];
        this.$router.push("/FirstPage");
      }
    },
    // 关闭其他标签
    closeOther() {
      const curItem = this.tagsList.filter((item) => {
        return item.path === this.$route.fullPath;
      });
      this.tagsList = curItem;
    },
    // 设置标签
    setTags(route) {
      const isExist = this.tagsList.some((item) => {
        return item.path === route.fullPath;
      });
      console.log(isExist);
      if (!isExist) {
        if (this.tagsList.length >= 12) {
          this.tagsList.shift();
        }
        //  ||
        // item.path.split("?")[0] == route.fullPath.split("?")[0]
        // console.log(this.$route)
        // this.tagsList.push({
        //   title: '首页',
        //   path: '/FirstPage',
        //   name: '首页',
        // });
        this.tagsList.forEach((item, index) => {
          if (item.path.split("?")[0] == route.fullPath.split("?")[0]) {
            this.tagsList.splice(index, 1);
          } else {
            // this.tagsList.push({
            //   title: route.name,
            //   path: route.fullPath,
            //   name: route.name,
            // });
          }
        });
        this.tagsList.push({
          title: route.name,
          path: route.fullPath,
          name: route.name,
        });
      }
      console.log("tagsList", this.tagsList);
    },
    handleTags(command) {
      command === "other" ? this.closeOther() : this.closeAll();
    },
    // -----------------------------------------------------------------------------

    initWebSocket(userId) {
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      let wsUrl = "wss://bjsf.bjsky.top/wss";
      this.websocket = new WebSocket(wsUrl);
      window.websocket = this.websocket;
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onmessage = this.setOnmessageMessage;
      this.websocket.onclose = this.websocketclose;
      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
      // window.onbeforeunload = that.onbeforeunload
      var that = this;
      this.$bus.$on("websocketsend", function (msg) {
        console.log(msg);
        that.websocketsend(msg);
      });
    },
    start() {
      //清除延时器
      this.timeoutObj && clearTimeout(this.timeoutObj);
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      this.timeoutObj = setTimeout(() => {
        if (this.websocket && this.websocket.readyState == 1) {
          let msg = {
            user_id: sessionStorage.getItem("seller_user_id"),
            type: "pong",
          };
          this.websocket.send(JSON.stringify(msg)); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
        } else {
          this.reconnect();
        }
        //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
        this.serverTimeoutObj = setTimeout(() => {
          this.websocket.close();
        }, this.timeout);
      }, this.timeout);
    },

    reset() {
      // 重置心跳
      // 清除时间
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      // 重启心跳
      this.start();
    },

    // 重新连接
    reconnect() {
      if (this.lockReconnect) return;
      this.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      this.timeoutnum && clearTimeout(this.timeoutnum);
      this.timeoutnum = setTimeout(() => {
        this.initWebSocket();
        this.lockReconnect = false;
      }, 5000);
    },

    async setOnmessageMessage(event) {
      if (
        event.data != "pong" &&
        event.data != "Hello" &&
        event.data.split(" ")[1] != "退出了"
      ) {
        if (
          JSON.parse(event.data).userid ==
          sessionStorage.getItem("seller_user_id")
        ) {
        } else {
          if (JSON.parse(event.data).msg == "已读") {
          } else {
            this.$notify({
              title: "未读信息",
              message: "您有一条未读信息",
              duration: 6000,
            });
          }
        }
        // console.log(event, '获得消息');
      }
      this.reset();
      // 自定义全局监听事件
      window.dispatchEvent(
        new CustomEvent("onmessageWS", {
          detail: {
            data: event.data,
          },
        })
      );
      // //发现消息进入    开始处理前端触发逻辑
      // if (event.data === 'success' || event.data === 'heartBath') return
    },

    websocketonopen() {
      //开启心跳
      this.start();
      console.log(
        "WebSocket连接成功!!!" + new Date() + "----" + this.websocket.readyState
      );

      let msg = {
        user_id: sessionStorage.getItem("seller_user_id"),
        type: "u_admin1",
      };
      this.websocket.send(JSON.stringify(msg));
    },
    websocketonerror(e) {
      console.log("WebSocket连接发生错误" + e);
    },

    async websocketclose(e) {
      this.websocket.close();
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      console.log("WebSocket连接关闭");
      window.dispatchEvent(
        new CustomEvent("onmessageClose", {
          detail: {
            data: e.data,
          },
        })
      );
    },

    websocketsend(messsage) {
      // console.log(messsage)
      this.websocket.send(messsage);
      // this.$bus.$emit('bus-event', messsage)
      this.$bus.$on("busEvent", (msg) => {
        // A发送来的消息
        console.log(msg);
        this.websocket.send(msg);
      });
    },

    closeWebSocket() {
      // 关闭websocket
      this.websocket.close();
    },

    // -----------------------------------------------------------------------------
  },
  computed: {
    // ...mapState({
    //   userinfo: (state) => state.userInfo.user_id,
    //   token: (state) => state.m_user.token,
    // }),
    showTags() {
      // console.log("routes", this.$router.options.routes);
      // console.log("userInfo", $store.state.userInfo);
      return this.tagsList.length > 0;
    },
  },
  // mounted() {
  //   // this.$nextTick(function () {
  //   //   this.$on("websocketsend", function (messsage) {
  //   //     this.websocket.send(messsage);
  //   //   // this.$bus.$emit('bus-event', messsage)
  //   //   this.$bus.$on("busEvent", (msg) => {
  //   //     // A发送来的消息
  //   //     console.log(msg);
  //   //     this.websocket.send(msg);
  //   //   });
  //   //   });
  //   // });
  //   var that = this;
  //   new Vue().$on("websocketsend", function (msg) {
  //     console.log(msg);
  //     that.websocketsend(msg);
  //   });
  // },
  watch: {
    $route(newValue, oldValue) {
      this.setTags(newValue);
    },
  },
  created() {
    this.routerList = [];
    // this.$router.options.routes.push({
    //   path: '/abc',
    //   component: () => import('@/components/pages/finance/invoice'),
    //   name: 'abc',
    //   icon: "el-icon-s-tools",
    //   children: [
    //     {
    //       path: "/xitongshezhi",
    //       name: "阿三大苏打",
    //       component: '@/components/pages/Settings/xitongshezhi'
    //     },
    //   ],
    // })
    console.log("$route", this.$route);
    console.log("$router.options.routes", this.$router.options.routes);
    console.log("routerLimit", this.routerLimit);

    // this.$router.options.routes.forEach((is) => {
    //   if (!is.hide) {
    //     this.routerList.push(is);
    //     console.log(is.name);
    //   }
    // });
    this.routerLimit.forEach((is) => {
      if (!is.hide) {
        this.routerList.push(is);
        console.log(is.name);
      }
    });
    // this.routerLimit.shift();
    // this.$router.push("/Login");
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 全屏下按键esc后要执行的动作
        this.isFullscreen = false;
      }
    };
    this.setTags(this.$route);
    // 监听关闭当前页面的标签页
    bus.$on("close_current_tags", () => {
      for (let i = 0, len = this.tagsList.length; i < len; i++) {
        const item = this.tagsList[i];
        if (item.path === this.$route.fullPath) {
          if (i < len - 1) {
            this.$router.push(this.tagsList[i + 1].path);
          } else if (i > 0) {
            this.$router.push(this.tagsList[i - 1].path);
          } else {
            this.$router.push("/FirstPage");
          }
          this.tagsList.splice(i, 1);
          break;
        }
      }
    });
  },
  mounted() {
    if (
      sessionStorage.getItem("token") == null ||
      sessionStorage.getItem("token") == undefined ||
      sessionStorage.getItem("token") == "" ||
      sessionStorage.getItem("seller_id") == null ||
      (sessionStorage.getItem("seller_user_type") != null &&
        sessionStorage.getItem("seller_user_type") != 2)
    ) {
      //没有token   断开链接
    } else {
      // 连接
      this.initWebSocket(); // userId为socket链接的参数
      this.showFlag = true;
    }
    // var that = this;
    // // console.log("this", this);
    // this.$bus.$on("websocketsend", function (msg) {
    //   console.log(msg);
    //   that.websocketsend(msg);
    // });
  },
  beforeDestroy() {
    if (
      sessionStorage.getItem("token") == null ||
      sessionStorage.getItem("token") == undefined ||
      sessionStorage.getItem("token") == "" ||
      sessionStorage.getItem("seller_id") == null ||
      (sessionStorage.getItem("seller_user_type") != null &&
        sessionStorage.getItem("seller_user_type") != 2)
    ) {
      //没有token   断开链接
    } else {
      this.closeWebSocket();
    }
  },
  destroyed() {
    if (
      sessionStorage.getItem("token") == null ||
      sessionStorage.getItem("token") == undefined ||
      sessionStorage.getItem("token") == "" ||
      sessionStorage.getItem("seller_id") == null ||
      (sessionStorage.getItem("seller_user_type") != null &&
        sessionStorage.getItem("seller_user_type") != 2)
    ) {
      //没有token   断开链接
    } else {
      // indexee(12345).then(res=>{})
      this.websocket.send(123123); //发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
    }
  },
};
</script>

<style >
.kefu {
}

.icon {
  font-size: 30px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*定义滚动条轨道*/
::-webkit-scrollbar-track {
  background-color: transparent;

  border-radius: 4px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  background-color: rgba(50, 65, 87, 0.4);
  border-radius: 4px;
}

/deep/.royConetng {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tops {
  padding: 0px;
  background: #32394a;
  position: relative;

  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
}

.rights {
  background: #324157;
  text-align: left;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  width: 200px;
}

.rightsTrue {
  background: #324157;
  text-align: left;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  width: 60px;
}

.lefts {
  position: absolute;
  left: 200px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

.leftsTrue {
  position: absolute;
  left: 60px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}

#app,
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tags-li.active {
  border: 1px solid #f37b47;
  background-color: #f37b47;
}

.name {
  margin: 0 20px;
  color: #fff;
  font-size: 18px;
}

.appRight {
  padding-right: 40px;
}

.appLeft {
  width: 200px;
  /*border-right: solid 1px #576780;*/
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}
.appLeft i {
  margin-top: 3px;
  color: #f37b47;
}

.displays {
  display: flex;
  align-items: center;
}

.displayJUscen {
  justify-content: space-between;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-container {
  height: 100vh;
}

.tags {
  position: relative;
  height: 30px;
  overflow: hidden;
  background: #fff;
  padding-right: 120px;
  box-shadow: 0 5px 10px #ddd;
  z-index: 999;
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 5px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #f3f3f3;
  padding: 0 5px 0 12px;
  vertical-align: middle;
  color: rgb(0, 0, 0);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li.active {
  color: #fff;
}

.tags-li-title {
  float: left;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: rgb(0, 0, 0);
}

.tags-li.active .tags-li-title {
  color: #fff;
}

.tags-close-box {
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  width: 110px;
  height: 30px;
  /* background: #fff; */
  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.el-dropdown .el-button {
  margin: 0;
}

.sidebar > ul {
  overflow: hidden;
  height: 100%;
  background: #324157;
  overflow-y: auto;
}

/deep/ .el-menu-item-group .el-menu-item-group__title {
  padding: 0;
}
/* .el-menu-item:active {
  color: #f6f6f5 !important;
  background: linear-gradient(#eea85d, #ef8f19) !important;
} */

.no .el-icon-arrow-down {
  display: none;
}

.el-form-item {
  margin-bottom: 22px;
}

.shanshuo {
  animation: twinkle 0.5s infinite alternate;
}

.el-notification {
  cursor: pointer;
}
.caozuoBox {
  background: #f37b47;
  width: 68px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  color: #ffffff;
}
.tagBox {
  background: #f37b47;
  width: 88px;
  height: 25px;
  line-height: 25px;
  margin-top: 2px;
  border-radius: 5px;
  color: #ffffff;
}
</style>
